<template>
  <div>
    <l-header :sliderShow="false" :backShow="true" :backUrl="'verification'"></l-header>
    <div class="w89">
      <h2 class="title">{{$t('local.OnlineAddress.5636ue8nev80')}}</h2>
      <div class="topTip" v-if="branchList['top_tip_'+langSuff]==''?false:true">
        {{branchList['top_tip_'+langSuff]}}
      </div>
      <van-collapse v-model="activeName">
        <van-collapse-item
          v-for="(item, index) in list"
          :key="index"
          :name="index"
          :title="item['name_'+langSuff]"
        >
          <div class="bankContent">
            <!-- <div>
                <div class="mainCon" @click="copyTXT(item['payee_'+langSuff])" v-if="item['payee_'+langSuff]?true:false">
                  <span class="bankLabel">{{$t('local.OnlineAddress.5636ue8ngi40')}}</span>
                  <span class="bankValue">{{ item['payee_'+langSuff] }}</span>
                </div>
            </div> -->
            <div v-for="(child, index1) in forList" :key="index1">
              <div class="mainCon" @click="copyTXT(item[child.value])" 
                v-if="item[child.value] &&  (!['tip_'+langSuff,'name_'+langSuff].includes(child.value))?true:false">
                <span class="bankLabel">{{item.type==2?  (child['title2']?child['title2']:child.title) : child.title }}</span>
                <span class="bankValue">{{ item[child.value] }}</span>
              </div>
              <div class="tipColor" v-if="child.value =='tip_'+langSuff">{{ item[child.value] }}</div>
            </div>
            <span class="copyText">{{$t('local.OnlineAddress.5636ue8nh2g0')}}</span>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="detailOperation">
        <router-link :to="`pact/`+id">
            <img src="@/assets/img/bank.png" alt="" />
            <div>
              <div class="title">{{$t('local.OnlineAddress.5636ue8nhj80')}}</div>
              <div class="label">{{$t('local.OnlineAddress.5636ue8ni0c0')}}</div>
            </div>
          <img src="@/assets/img/right.png" alt="" class="right" />
        </router-link>
      </div>
      <van-button
        type="info"
        block
        class="next-step"
        @click="$routerTo('OnlineRemit')"
        >{{$t('local.OnlineAddress.5636ue8nik00')}}</van-button
      >
    </div>
  </div>
</template>
<script>
import { blank } from '@/api/allPage'
import { agreement  } from '@/api/common'
export default {
  inject: ['branch'],
  data() {
    return {
      activeName: [0,1],
      list:[],
      id:''
    };
  },
  computed:{
    forList(){
      var  list = [
        {title: this.$t('local.OnlineAddress.5636ur297dw0') ,value:'payee_'+this.langSuff},
        {title: this.$t('local.OnlineAddress.5636ur298ko0') ,value:'name_'+this.langSuff},
        {title: this.$t('local.OnlineAddress.5636ur298vk0') ,value:'account_zh'},
        {title: this.$t('local.OnlineAddress.5636vkowa580') ,value:'fps_zh'},
        {
          title: this.$t('local.OnlineAddress.5636ur2997c0') ,
          title2:this.$t('local.OnlineAddress.56bqc021ii00'),
          value:'city_'+this.langSuff
        },
        {title: this.$t('local.OnlineAddress.5636ur299hs0') ,value:'address_'+this.langSuff},
        {title: this.$t('local.OnlineAddress.5636wxqd2vo0') ,value:'swift_zh'},
        {title: this.$t('local.OnlineAddress.5636ur299r40') ,value:'tip_'+this.langSuff},
        {title: this.$t('local.OnlineAddress.5636ur299zk0') ,value:'bank_name_'+this.langSuff},
        {
          title: this.$t('local.OnlineAddress.5636ur29a7s0') ,
          title2:this.$t('local.OnlineAddress.56bqc021l7w0'),
          value:'bank_name_city_'+this.langSuff
          },
        {
          title: this.$t('local.OnlineAddress.5636ur29ags0') ,
          title2:this.$t('local.OnlineAddress.56bqc021low0'),
          value:'bank_name_address_'+this.langSuff
        },
        {title: this.$t('local.OnlineAddress.5636ur29apc0') ,value:'adjunct_'+this.langSuff},
      ]
      return list
    },
    langSuff(){
        return  this.$store.state.langSuff
    },
    branchList(){
     var list  = this.branch()?.local || []
      if(list.length){
        return list[0]
      }
      return list;
    }
  },
  created(){
    this.blankList()
    this.agreementList()
  },
  methods: {
    copyTXT(val) {
      var oInput = document.createElement("input");
      oInput.value = val;
      oInput.setAttribute("readonly", "readonly");
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.style.display = "none";
      this.$toast(this.$t('local.OnlineAddress.5636ue8nj4k0'));
    },
    blankList(){
      blank()
      .then(res=>{
          if(res.code==1){
            this.list = res.data
          }
      })
    },
    agreementList(){
      agreement({type:3,pageSize:1})
      .then(res=>{
        this.id = (res.data[0].id ?? '')
      })

    }
  },
};
</script>
<style lang="less" scoped>
h2.title {
  margin-bottom: 0.3rem;
}
.topTip {
  background-color: #eaf2fc;
  color: #589af6;
  font-size: 0.22rem;
  border-radius: 3px;
  padding: 4%;
  margin-bottom: 0.5rem;
}
.bankContent {
  font-size: 0.22rem;
  color: @sizeColor;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  .mainCon {
    display: flex;
    justify-content: space-between;
    margin: 0.2rem 0;
    .bankLabel {
      color: @placeColor;
      flex: 1.2;
    }
    .bankValue {
      // width: 50%;
      flex: 2;
      text-align: right;
    }
  }
  .tipColor {
    color: @placeColor;
  }
  .copyText {
    float: right;
    color: @sizeColor;
    .center;
  }
  .copyText:before {
    content: " ";
    display: inline-block;
    height: 0.22rem;
    width: 0.22rem;
    margin-right: 0.1rem;
    background: url("~@/assets/img/copy.png") no-repeat;
    background-position: center;
    background-size: 97%;
  }
}
@{deep}.van-cell__title {
  font-size: 0.26rem;
  color: #404040;
}
@{deep}.van-cell {
  border: 0;
  margin-top: 0;
  padding: 0 16px;
}
@{deep}.van-collapse-item {
  border: 0.02rem solid @sliderColor;
  overflow: hidden;
  border-radius: 2%;
  margin: 0.3rem 0;
  padding: 0.2rem 0;
}
@{deep}.van-collapse-item__content {
  padding-top: 0;
}
@{deep}.van-hairline--top-bottom::after,
@{deep}.van-hairline-unset--top-bottom::after {
  border-width: 0 0;
}
@{deep}.van-collapse-item__title--expanded::after {
  display: none;
}
@{deep}.van-collapse-item--border::after {
  border-top: 0;
}
.detailOperation {
  .center;
  justify-content: space-between;
  margin: 0.5rem 0;
  > a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      width: 80%;
      line-height: 0.4rem;
    }
    .title {
      font-size: 0.26rem;
      color: @sizeColor;
    }
    .label {
      font-size: 0.22rem;
      color: #b3b3b3;
    }
    > img {
      max-width: 0.8rem;
    }
    img.right {
      max-width: 0.2rem;
    }
  }
}
</style>